<template>
  <div>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media" v-for="item in this.newslist" :key="item.id">
          <!-- 注意/home/newsinfo/是常量，要和item.id进行区分，要用单引号包裹 -->
          <!-- 只要后面有提取变量值，都需要使用属性绑定的方式 -->
        <router-link :to="'/home/newsinfo/'+item.id">
          <img class="mui-media-object mui-pull-left" :src="item.img_url" />
          <div class="mui-media-body">
            {{item.title}}
            <p class="mui-ellipsis">
              <span>发表时间：{{item.add_time|dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
              <span>点击：{{item.click}}次</span>
            </p>
          </div>
        </router-link>
      </li>      
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      newslist: ""
    };
  },
  created() {
      this.getNewsList();
  },
  methods: {
    async getNewsList() {
      const { data } = await this.$http.get("/api/getnewslist");
      if (data.status === 0) {       
        this.newslist = data.message;
        console.log('this.newslist :>> ', this.newslist);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.mui-media-body {
  .mui-ellipsis {
    color: #26a2ff;
    display: flex;
    justify-content: space-between;
  }
}
</style>
